// item
import React, { Component } from "react";
import PropTypes from "prop-types";
import "./index.css";
export default class Item extends Component {
  state = { mouse: false };
  static propTypes = {
	  update_todos:PropTypes.func.isRequired
  };
  // 鼠标移入true，移出FALSE
  handle_mouse = (flag) => {
    //   let {mouse}=this.state;
    return () => {
      //   console.log(flag);
      this.setState({ mouse: flag });
    };
  };
  //   更新checkbox，以及状态栏
  handle_change = (id) => {
    return (event) => {
      // console.log(id, event.target.checked);
      //   return
      this.props.update_todos(id, event.target.checked);
    };
  };
  // 删除todo
  handle_delete = (id) => {
    console.log("del", id);
    if (window.confirm("确定删除？")) {
      this.props.handle_delete(id)
    }
  };
  render() {
    let { mouse } = this.state;
    let { name, done, id } = this.props;
    return (
      <div
        style={{ backgroundColor: mouse === true ? "gray" : "white" }}
        onMouseEnter={this.handle_mouse(true)}
        onMouseLeave={this.handle_mouse(false)}
      >
        <label>
          <input
            type="checkbox"
            checked={done}
            onChange={this.handle_change(id)}
          />
          <span>{name}</span>
          <button
            style={{ display: mouse === true ? "block" : "none" }}
            onClick={() => {
              return this.handle_delete(id);
            }}
          >
            删除
          </button>
        </label>
      </div>
    );
  }
}
